<template>
  <div class="detail_container">
    <div class="page-title" style="cursor: pointer;">
      <i class="el-icon-arrow-left"></i> 我的订单/订单信息
    </div>
    <div class="detail_container">
      <div class="left">
        <div>
          <span class="info_title">商品信息</span>
          <div class="product_info">
            <div class="el-image img" style="width: 62px; height: 62px;"><img
                src="https://argos-shop-online.s3.amazonaws.com/pc/gp/B07XGP7HTW/81fwoaIeEOL._AC_SL1500_.jpg"
                class="el-image__inner" style="object-fit: scale-down;"><!----></div>
            <div class="prodesc"><span
                                                          class="tit"> COOFANDY 男士披肩领长开衫针织荷叶边时尚毛衣垂坠斗篷 </span>
              <div class="price"><span class="real_price"> $34.60 </span><span
                  class="num"> x1 </span></div>
              <span class="attr"> 颜色:卡其色 大小:XX 大号 </span></div>
            <div class="delivery"></div>
            <div class="fees"><span class="desc"> 总价 : 34.60 </span><span
                class="desc"> 折扣 : -$0 </span><span
                                                                         class="desc"> 税收 : $0.00 </span><span
                class="desc"> 运费 : $0.00 </span><span class="desc total_Desc"> 合计 :$34.60 </span>
            </div>
          </div>
        </div>
       <common-pagination :page="1" />
      </div>
      <div class="right">
        <span class="info_title" style="margin-bottom: 17px;"> 订单信息 </span>
        <div class="order_box boxMargin">
          <span class="orderFont" @click="handleCopy('654321')">订单号 : SC20240325141714155
            <i class="el-icon-copy-document" style="cursor: pointer;"></i>
          </span>
          <span class="orderFont">时间 : 2024-03-25 14:17</span>
          <span class="orderFont">状态 :
            <span style="color: rgb(228, 17, 31);">已取消</span>
          </span>
        </div>
        <div class="order_box boxMargin"><span
                                                                  style="font-weight: 500; font-size: 14px; margin-bottom: 10px;">接收者</span><span
            style="font-weight: 500; font-size: 12px;"> 样样 93 *****287</span><span
           
            style="font-weight: 500; font-size: 12px; color: rgb(153, 153, 153); margin-bottom: 10px;">详细地址</span>
        </div>
        <div class="order_box">
          <div class="flex_row_between"
               style="font-weight: 600; font-size: 12px; margin: 20px 14px 0px;"><span
             >订单总额</span><span> $34.60 </span></div>
          <span class="flex_row_between item_line"> 折扣 <span
             >-$0.00</span></span>
          <div class="flex_row_between item_line"><span>税收 </span>+$0</div>
          <div class="flex_row_between item_line"><span> 运费 </span><span
             >+$0</span></div>
          <div style="margin-left: 14px; margin-right: 14px;">
            <div class="el-divider el-divider--horizontal"><!----></div>
          </div>
          <div
               style="display: flex; flex-direction: row; justify-content: flex-end; margin-right: 14px; margin-left: 14px;">
            <span style="font-weight: 400; font-size: 12px;">合计 : <span
                                                                                             class="real_price">$34.60</span></span>
          </div>
          <div
               style="display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0px 10px 24px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import CommonPagination from "@/components/common/CommonPagination.vue";
import CopyHooks from '@/hooks/CopyHooks.js'
const { handleCopy } = CopyHooks()
</script>
<style scoped lang="scss">
.detail_container{
  margin-top: 24px;
  margin-left: 34px;
  display: flex;
  flex-direction: column;
  .info_title{
    font-weight: 500;
    font-size: 14px;
  }
  .detail_container{
    display: flex;
    flex-direction: row;
    .left{
      width: 484px;
      .product_info{
        margin-top: 17px;
        width: 484px;
        padding-top: 10px;
        padding-bottom: 10px;
        border: 1px solid #eee;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .img{
          display: flex;
          justify-content: center;
          width: 62.73px;
          height: 62.73px;
          margin-left: 3px;
          margin-right: 18px;
        }
        .prodesc{
          display: flex;
          flex-direction: column;
          width: 242px;
          .tit{
            font-family: Roboto;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 24px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            -webkit-box-orient: vertical;
            cursor: pointer;
          }
          .price{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 10px;
            .num{
              font-size: 14px;
            }
          }
          .attr{
            font-family: Roboto;
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            margin-top: 4px;
          }
        }
        .fees{
          display: flex;
          flex-direction: column;
          font-family: Roboto;
          font-style: normal;
          font-weight: 400;
          font-size: 12px;
          .desc{
            margin-top: 4px;
          }
          .total_Desc{
            font-weight: 600;
          }
        }
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      margin-left: 14px;
      width: 347px;
    }
  }
  .real_price{
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-price);
  }
  .delivery{
    height: 92px;
    width: 0;
    margin-left: 21px;
    margin-right: 31px;
    border: 1px solid #eee;
    transform-origin: 0 0;
  }
}
.detail_container .right .boxMargin{
  margin-bottom: 14px;
  padding-top: 14px;
  padding-left: 14px
}

.detail_container .right .item_line{
  font-weight: 400;
  font-size: 12px;
  margin-top: 18px;
  margin-left: 14px;
  margin-right: 14px
}

.detail_container .right .order_box{
  width: 347px;
  border: 1px solid #eee;
  border-radius: 4px;
  display: flex;
  flex-direction: column
}

.detail_container .right .order_box span{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}
.detail_container .flex_row_between{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.detail_container .right .orderFont{
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 10px
}

</style>